﻿@{ Layout = "../Shared/_Layout.cshtml"; }

<div v-if="pageStep > 0" class="card-box">

  <h4 class="card-title">
    插件{{ pageType }}向导
  </h4>
  <p class="card-text">
    欢迎来到插件{{ pageType }}向导！
  </p>

  <div v-if="listPackages.length > 1" v-for="(listPackage, index) in listPackages" class="alert" v-bind:class="{ 'alert-success': listIndex > index, 'alert-warning': listIndex === index, 'alert-secondary': listIndex < index }">
    {{ listPackage.id }}({{ listPackage.packageType == 'Plugin' ? '插件' : '类库' }}) {{ listPackage.version }} —
    <span v-if="listIndex > index">
      {{ pageType }}成功!
    </span>
    <span v-else-if="listIndex < index">
      等待{{ pageType }}!
    </span>
    <span v-else>
      正在{{ pageType }}...
    </span>
  </div>

  <ul class="nav nav-pills navtab-bg nav-justified">
    <li class="nav-item">
      <a class="nav-link" v-bind:class="{ active: pageStep == 1 }" href="javascript:;">下载{{ pageType }}包</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" v-bind:class="{ active: pageStep == 2 }" href="javascript:;">{{ pageType }}插件</a>
    </li>
  </ul>

  <template v-if="pageStep === 1">

    <div class="card-body">

      <div class="table-responsive">

        <table class="table tablesaw table-hover m-0">
          <thead>
            <tr class="thead">
              <th class="text-center text-nowrap">状态</th>
              <th class="text-nowrap">Id</th>
              <th class="text-nowrap">名称</th>
              <th class="text-nowrap">版本</th>
              <th>简介</th>
              <th class="text-center text-nowrap">发布时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="package in currentPackages">
              <td class="text-center text-nowrap font-13 text-muted">
                <div class="text-success" v-bind:style="{ display: currentDownloadIds.indexOf(package.id) !== -1 && currentDownloadingId != package.id ? '' : 'none' }">
                  下载完成
                </div>
                <div v-bind:style="{ display:currentDownloadingId == package.id ? '' : 'none' }">
                  <img src="../pic/animated_loading.gif" />下载中...
                </div>
                <div v-bind:style="{ display: currentDownloadIds.indexOf(package.id) == -1 && currentDownloadingId != package.id ? '' : 'none' }">
                  等待下载
                </div>
              </td>
              <td class="text-nowrap">
                {{ package.id }}
              </td>
              <td class="text-nowrap">
                {{ package.title }}
              </td>
              <td class="text-nowrap">
                {{ package.version }}
              </td>
              <td>
                {{ package.description }}
              </td>
              <td class="text-center text-nowrap">
                {{ package.published }}
              </td>
            </tr>

          </tbody>
        </table>

      </div>
    </div>

  </template>

  <!-- pageStep 2 place -->
  <template v-if="pageStep === 2">

    <div class="card-body">

      <div class="table-responsive">

        <table class="table tablesaw table-hover m-0">
          <thead>
            <tr class="thead">
              <th class="text-center text-nowrap">状态</th>
              <th class="text-nowrap">Id</th>
              <th class="text-nowrap">名称</th>
              <th class="text-nowrap">版本</th>
              <th>简介</th>
              <th class="text-center text-nowrap">发布时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="package in currentPackages">
              <td class="text-center text-nowrap font-13 text-muted">
                <div class="text-success" v-bind:style="{ display: currentUpdatedIds.indexOf(package.id) !== -1 && currentUpdatingId != package.id ? '' : 'none' }">
                  {{ pageType }}完成
                </div>
                <div v-bind:style="{ display:currentUpdatingId == package.id ? '' : 'none' }">
                  <img src="../pic/animated_loading.gif" />{{ pageType }}中...
                </div>
                <div v-bind:style="{ display: currentUpdatedIds.indexOf(package.id) == -1 && currentUpdatingId != package.id ? '' : 'none' }">
                  等待{{ pageType }}
                </div>
              </td>
              <td class="text-nowrap">
                {{ package.id }}
              </td>
              <td class="text-nowrap">
                {{ package.title }}
              </td>
              <td class="text-nowrap">
                {{ package.version }}
              </td>
              <td>
                {{ package.description }}
              </td>
              <td class="text-center text-nowrap">
                {{ package.published }}
              </td>
            </tr>

          </tbody>
        </table>

      </div>
    </div>

  </template>

</div>

<div v-else class="alert alert-primary">
  <h4 class="alert-heading">{{ pageType }}完成！</h4>
  <p>
    恭喜，您已经完成了插件的{{ pageType }}，系统将重启并跳转，请稍后...
  </p>
</div>

@section Scripts{
<script src="../assets/js/compareversion.js"></script>
<script src="install.js" type="text/javascript"></script> }